<template>
  <div class="app-container">
    <el-card class="my-card">
      <el-button type="primary" @click="add" style="margin-bottom: 20px;">新增父节点</el-button>
      <el-tree
        :data="tree"
        :expand-on-click-node="false"
        node-key="id"
        :default-expanded-keys="[1]"
      >
      <span slot-scope="{ node, data }" class="item">
        <span class="item-label">{{ data.name }}</span>
        <i v-if="!data.leaf" class="el-icon-circle-plus" style="margin-right: 10px;" @click="add(node, data)"></i>
        <i class="el-icon-edit-outline" @click="update(data)"></i>
      </span>
          
    </el-tree>

      <el-dialog :visible="visible" :title="form.id ? '编辑类型' : '新增类型'" :before-close="onClose">
        <el-form :model="form">
          <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onCommit">确定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getTypeTree, createTypeTree, updateTypeTree } from "@/api/eventType";

export default {
  data() {
    return {
      visible: false,
      tree: [],
      form: {
        name: "",
        code: "",
        leaf: 0,
        parent: 0,
      },
    };
  },
  methods: {
    getData() {
      getTypeTree().then(({ data }) => {
        this.tree = data;
        console.log(data);
      });
    },
    add(node, data) {
      if (node.level === 2) this.form.leaf = 1;
      if (data) this.form.parent = data.id;
      this.visible = true;
    },
    onCommit() {
      // 提交表单
      if (this.form.id) {
        // 更新
        updateTypeTree(this.form).then(() => {
          this.onClose()
          this.getData();
          this.$message.success("更新成功");
        });
      } else {
        // 新增
        createTypeTree(this.form).then(() => {
          this.getData();
          this.onClose()
          this.$message.success("新增成功");
        });
      }
    },
    update(data) {
      this.form = data;
      this.visible = true;
    },
    onClose() {
      // 关闭弹窗
      this.visible = false;
      this.form = {
        name: "",
        code: "",
        leaf: 0,
        parent: 0,
      };
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>

.item {
  display: flex;
  align-items: center;
  &-label {
    flex: 0 0 200px;
  }
}

::v-deep {
  .el-card {
    height: 98%;

    &__body {
      height: 100%;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      .el-tree {
        width: 100%;
        flex-grow: 1;
        height: 10px;
        overflow-y: auto;
      }
    }
  }
  .el-tree-node__content {
    padding: 2px 0;
  }
}
</style>